<template>
    <rx-dialog @handOk="handleSubmit" @cancel="cancel">
        <rx-layout>
            <div slot="center">
                <a-form style="height:100%;">
                    <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$comi18('rxDialog.name', '标题')">
                        <a-input v-model="title" style="width: 80%"></a-input>
                    </a-form-item>
                    <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.dataFormat','日期格式')">
                        <a-select style="width: 80%" :placeholder="i18n('form.dataFormat','日期格式')" :getPopupContainer="(p)=>p.parentNode" :options="dateFormats" v-model="settings.format"></a-select>
                    </a-form-item>
                    <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('defValue','默认值')">
                        <a-range-picker
                            style="width:80%"
                            @change="dateChange"
                            :getCalendarContainer="p=>p.parentNode"
                            :show-time="settings.format!='YYYY-MM-DD'"
                            :format="settings.format || 'YYYY-MM-DD'"
                            v-model="value"
                        />
                    </a-form-item>
                </a-form>
            </div>
        </rx-layout>
    </rx-dialog>
</template>

<script>
import filter from "./filter";
import dayjs from "dayjs";
export default {
    name: "dateRange-filter",
    mixins:[filter],
    data() {
        return {
            dateFormats:[
                {value:'YYYY-MM-DD',label:'YYYY-MM-DD'},
                {value:'YYYY-MM-DD HH:mm:ss',label:'YYYY-MM-DD HH:mm:ss'}
            ],
        }
    },
    created() {

    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"codeGenSetting",key);
        },
        //初始化配置
        initSetting() {
            if(this.row.settings){
                this.settings =this.row.settings;
            }else {
                this.settings = {
                    format:"YYYY-MM-DD"
                }
            }
        },
        dateChange(e){
            let ary=[];
            if(e.length==0){
                this.value = ''
                return
            }
            ary.push(dayjs(e[0]).format( this.settings.format || 'YYYY-MM-DD'));
            ary.push(dayjs(e[1]).format( this.settings.format || 'YYYY-MM-DD'));
            this.value=ary;
        }
    },
    watch: {

    }
}
</script>

<style scoped>
</style>